//设备数据
<template>
  <div class="con" v-loading="loading"
       element-loading-background="rgba(0, 0, 0, 0.1)">
    <div class="workmanship" v-show="!isShowSet">
      <div class="workmanship_tit">
        <span>{{ form.title }}<i></i></span>
      </div>
      <div class="workmanship_con">
        <div id="equipment" style="width: 100%; height: 100%"></div>
      </div>
    </div>
    <div class="workmanship editBox" v-show="isShowSet">
      <span @click="dialogVisible = true">编辑</span>
    </div>
    <el-dialog title="栏目设置"
               v-loading="loading"
               :close-on-click-modal="false"
               :visible.sync="dialogVisible" id="dialogBox">
      <el-form ref="form" :model="saveFrom" label-width="100px">
        <el-form-item label="栏目标题：">
          <el-input v-model="saveFrom.title" class="inputDiv"></el-input>
        </el-form-item>
        <el-form-item label="数据方式：">
          <el-radio-group v-model="saveFrom.datatype">
            <el-radio label="0">固定数据</el-radio>
            <el-radio label="1">系统统计</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 固定值 -->
        <div v-if="saveFrom.datatype === '0'">
          <el-form-item label="总量">
            <el-input v-model="saveFrom.total" class="inputDiv"></el-input>
          </el-form-item>
          <el-form-item label="分配">
            <el-input v-model="saveFrom.allocation" class="inputDiv"></el-input>
          </el-form-item>
          <el-form-item label="在线">
            <el-input v-model="saveFrom.online" class="inputDiv"></el-input>
          </el-form-item>
          <el-form-item label="离线">
            <el-input v-model="saveFrom.offline" class="inputDiv"></el-input>
          </el-form-item>

        </div>
        <!-- 基数叠加 -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取消</el-button>
        <el-button type="text" @click="submit(1)">保存继续编辑</el-button>
        <el-button type="text" @click="submit(2)">保存返回主页</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {constructionRequest, SCREEN_CODE} from "@/utils/http/request";

export default {
  data() {
    return {
      chart: null,
      loading: false,
      dialogVisible: false,
      form: {
        datatype: "",
        title: "",
        total: "",
        allocation: '',
        online: "",
        offline: ""
      },
      xAxisData: ["总量", "分配", "在线", "离线"],
      yAxisData: [],
      saveFrom: {}
    };
  },
  watch: {
    isShowSet() {
      setTimeout(() => {
        if (this.chart) {
          this.drawLine()
          this.chart.resize()
        }
      }, 200)
    },
    dialogVisible(val) {
      if (val) {
        this.saveFrom = {...this.form}
        if (this.saveFrom.datatype !== '0') {
          this.saveFrom = {
            ...this.saveFrom, ...{
              total: "",
              allocation: '',
              online: "",
              offline: ""
            }
          }
        }
      }
    }
  },
  props: ["isShowSet"],
  created() {
    this.getData();
  },
  methods: {
    //获取数据
    getData() {
      this.loading = true
      constructionRequest.Equipment({
        datatype: 'null',
        screenCode: SCREEN_CODE.construction,
      }).then((res) => {
        if (res.code === "01") {
          this.form = {
            ...res,
          };
          this.yAxisData = [res.total, res.allocation, res.online, res.offline]
          this.yAxisData.length && this.drawLine();
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    //提交
    submit(val) {
      this.loading = true
      constructionRequest.EquipmentEdit({
        ...this.saveFrom,
        screenCode: SCREEN_CODE.construction,
      }).then((res) => {
        if (res.code === "01") {
          this.$message.success(res.msg || "修改成功");
          this.getData();
          this.dialogVisible = false;
          if (val === 2) {
            this.$emit("func1", false); //向父组件传值
          }
        }
      }).catch(() => {
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("equipment"));
      // 绘制图表
      this.chart.clear()
      this.chart.setOption({
        tooltip: {
          // 悬停指示
          trigger: "item",
          // formatter: "{b}: {c}%",
        },
        grid: {
          left: 10,
          right: 10,
          top: 30,
          bottom: 0,
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            show: false, //不显示坐标轴轴线
          },
          axisTick: {
            show: false, //不显示坐标轴刻度
          },
          axisLabel: {
            show: true, //x轴是否显示文字
            textStyle: {
              color: "#42DDFF", //文字颜色
              fontSize: 18,
            },
          },
          splitLine: {
            show: false,
          },
          data: this.xAxisData,
        },
        yAxis: {
          axisLine: {
            show: false, //不显示坐标轴轴线
          },
          axisTick: {
            show: false, //不显示坐标轴刻度
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false, //y轴是否显示文字
            textStyle: {
              color: "#42DDFF", //文字颜色
              fontSize: 18,
            },
          },
          type: "value",
        },
        series: [
          {
            data: this.yAxisData,
            type: "bar",
            itemStyle: {
              normal: {
                // 定制显示（按顺序）
                color: function (params) {
                  var colorList = ["#7bd0ff", "#df86bd", "#df86bd", "#a785ff"];
                  return colorList[params.dataIndex];
                },
              },
            },
            barGap: "-100%",
            barWidth: "27",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#42DDFF",
                fontSize: 18,
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/style/base";

.con {
  width: 100%;
  height: 100%;

  .editBox {
    background: #384768;
    border: 1px solid #67b1ea;
    color: #6ef7ff;
    font-size: 20px;
    align-items: center;
    display: flex;
    display: -webkit-flex;
    justify-content: center;

    span {
      cursor: pointer;
    }
  }

  .workmanship {
    width: 100%;
    height: 100%;

    .workmanship_tit {
      background: url(../../assets/image/title_left.png) no-repeat;
      height: 29px;
      line-height: 12px;
      font-size: $font-sise32;
      font-weight: bold;
      color: #fdf0a8;
      padding-left: 8px;

      span {
        i {
          width: 54px;
          height: 16px;
          display: inline-block;
          background: url(../../assets/image/title_left_btn.png) no-repeat;
          margin-left: 10px;
        }
      }
    }

    .workmanship_con {
      height: calc(100% - 29px);
      // overflow-y: auto;
    }
  }

  .inputDiv {
    width: 207px;
  }

  .inputDiv ::v-deep .el-input__inner {
    width: 100%;
    background: #ededed;
  }
}
</style>
